<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>汇制雨滴</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			canvas{
				display: block;
				/*vertical-align: middle;*/
				background: #000;
			}
		</style>
	</head>
	<body>
		<canvas id="canvas">您的浏览器不支持画布，请您更换浏览器</canvas>
	</body>
	<script type="text/javascript">
		var can = document.getElementById('canvas');
		//设置2d绘图
		var ctx = can.getContext('2d')
		
		//获取浏览器窗口的宽高
		var w = can.width = window.innerWidth;
		var h = can.height = window.innerHeight;
		
		//自适应浏览器宽高
		 window.onresize = function(){
		    w = can.width = window.innerWidth;
			h = can.height = window.innerHeight;
		 }
		 
		 //canvas绘制矩形
		 //设置矩形框的路径
		 	//ctx.rect(x,y,w,h); //xy 坐标  wh宽高
		 //画出来
		 	//ctx.fill();  //填充方法
		 	//stx.stroke(); //触笔方法 空心的
//		 	ctx.fillStyle = 'red';
//		 	ctx.fillRect(100,100,100,100)
//		 	//绘制圆形
//		 	ctx.arc(250,250,50,0,Math.PI*2,false)
//		 	ctx.strokeStyle = 'red';
//		 	ctx.stroke();
		 	
		 //运动
//		 var y = 0;
//		 	setInterval(function(){
//		 		y++;
//		 		//先清空再绘制
//		 		ctx.clearRect(0,0,w,h);
//		 		ctx.fillRect(100,y,100,100)
//		 	},30)
		//雨滴特效
		function Drop(){ //创建雨滴类
			
		}
		//原型
		Drop.prototype ={
			//初始化
			init:function(){
				this.x = rand(0,w);//雨滴的初始X坐标
				this.y = 0;//雨滴的初始Y坐标
				this.vy = rand(4,5) //雨滴下落的速度
				this.l = rand(0.8*h,0.9*h);//雨滴下落的最大高度
				this.r = 1;//初始半径
				this.vr = 1; //半径增大的速度
				this.a = 1; //初始透明度
				this.va = 0.9; //透明度变化系数
			},
			//绘制
			draw:function(){
				if (this.y>this.l) {
					ctx.beginPath() //开始路径
					//绘制波纹(圆形)
					ctx.arc(this.x,this.y,this.r,0,Math.PI*2,false)
				 	ctx.strokeStyle = 'rgba(0,255,255,'+ this.a + ')';
				 	ctx.stroke();
				}else{
					//绘制下落的雨滴
					//ctx.clearRect(0,0,w,h);
					ctx.fillStyle = 'rgba(0,255,255,1)'
					ctx.fillRect(this.x,this.y,2,10);
				}
				
				this.update();
			},
			//更新坐标
			update:function(){
				//当y坐标小于1高度的时候就一直累加
				if (this.y<this.l) {
					this.y += this.vy;
				}else{
					//圆形半径增大
//					if (this.r<50) {
//						this.r += this.vr;
//					}else{
//						
//					}
					//判断透明度
					if (this.a>0.03) {
						this.r += this.vr;
						if (this.r > 50) {
							this.a *= this.va;
						}
					}else{
						//重新初始化了
						this.init()
					}
					
				}
//				this.y += this.vy;
			}
		}
		//实例化雨滴对象
//		var drop = new Drop();
//		drop.init();
		
		var drops = [];
		for (var i=0; i<30; i++) {
			setTimeout(function(){
				var drop = new Drop();
				drop.init();
				drops.push(drop);
			},i*200)
			
		}
		
		setInterval(function(){
			//绘制一个透明层
			ctx.fillStyle = 'rgba(0,0,0,0.1)';
			ctx.fillRect(0,0,w,h)
			for (var i=0; i<drops.length; i++) {
				drops[i].draw()
			}
//			drop.draw()
		},1000/60); //帧数
		
		function rand(min,max){
			return Math.random()*(max-min) +min;//min~MAX
		}
	</script>
</html>
